<template>
	<view class="userPage">
		<view class="user-box">
			<image
				src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-11-28%2F5a1d2c51c2240.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672487857&t=25c1fff7da13781b30693ade87e5e0f4"
				mode=""></image>
			<view class="user" @click="goUserPage">
				<image class="avatar" :src="userInfo.avatar_file.url"></image>
				<view class="nickName">{{userInfo.nickname}}</view>
			</view>
		</view>
		<!-- 显示订单管理 -->
		<view class="card">
			<van-grid :border="false" :column-num="5">
				<van-grid-item icon="pending-payment" text="待付款" />
				<van-grid-item icon="tosend" text="待发货" />
				<van-grid-item icon="logistics" text="待收货" />
				<van-grid-item icon="paid" text="待确定" />
				<van-grid-item icon="credit-pay" text="退款/售后" />
			</van-grid>
		</view>
		<!-- 用户列表管理 -->
		<view class="card">
			<van-cell icon="location-o" title="地址管理" @click="goUserModule('address/list')" is-link></van-cell>
			<van-cell icon="coupon-o" title="优惠卷" is-link></van-cell>
			<van-cell icon="paid" title="我的钱包" is-link></van-cell>
			<van-cell icon="service-o" title="联系客服" is-link></van-cell>
			<van-cell icon="setting-o" title="设置" is-link></van-cell>
		</view>

		<!-- 底部导航栏 -->
		<van-tabbar v-model="active" @change="onChange">
			<van-tabbar-item icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item icon="search">分类</van-tabbar-item>
			<van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
			<van-tabbar-item icon="setting-o">个人中心</van-tabbar-item>
		</van-tabbar>

	</view>
</template>

<script>
	import {
		ref
	} from 'vue';
	import Storage from '@/untils/storage.js';
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onLoad() {
			this.userInfo = Storage.userinfo;
		},
		setup() {
			const active = ref(3);
			const onChange = (index) => {
				console.log(index);
				let router = ['index', 'cate', 'cart', 'user']
				uni.reLaunch({
					url: `/pages/${router[index]}/index`
				})
			};
			return {
				active,
				onChange
			};
		},
		methods: {
			goUserModule(e){
				uni.navigateTo({
					url: `/pages/user/${e}`
				})
			},
			goUserPage(e) {
				if (!Storage.TokenOut) {
					uni.navigateTo({
						url: "/pages/user/login/withpwd",
					})
				} else {
					uni.navigateTo({
						url: "/uni_modules/uni-id-pages/pages/userinfo/userinfo"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.uni-app--showtopwindow [data-page="pages/component/view/view"] uni-page-head {
		display: none;
	}

	.userPage {
		background-color: #f2f2f2;
	}

	.user-box {
		width: 100%;
		height: 500upx;
		position: relative;
	}

	.user-box image {
		width: 100%;
		height: 100%;
	}

	.user-box .user {
		position: absolute;
		width: 700upx;
		height: 200upx;
		left: 25upx;
		top: 180upx;
		z-index: 1;
		display: flex;
		align-items: center;
	}

	.user-box .user .avatar {
		width: 100upx;
		height: 100upx;
		margin: 0 30upx;
		border-radius: 100%;
	}

	.user-box .user .nickName {
		font-size: 50upx;
	}

	.card {
		margin: 25upx;
		width: 700upx;
		border-radius: 10upx;
		overflow: hidden;
	}
</style>
